<template>
  <div class="cc-month-dialog row"
  v-if="(local.type==='month' || local.type==='yearmonth') && local.showMonth"
  >
    <div class="col column">
      <div class="col row justify-around q-pl-sm" v-for="col in colList" :key="col">
        <div class="col row items-center" v-for="row in rowList" :key="row">
          <q-btn
            :label="months[col*3+row]"
            outline
            flat
            class="cc-month-btn"
            :class="local.month === col*3+row+1?'bg-primary text-white':''"
            @click="selMonth(col*3+row+1)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    local: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
      start: 0,
      colList: [0, 1, 2, 3],
      rowList: [0, 1, 2],
    };
  },
  created() {

  },
  mounted() {
  },
  methods: {
    selMonth(v) {
      this.local.month = v;
      this.$emit('calcText');
      //
      this.$emit('closeSelect');
    },
  },
};
</script>

<style scoped lang="stylus">
.cc-month-dialog
  width 270px
  height 270px
  .cc-month-btn
    font-weight 400
    width 80px
</style>
